/** Copyright 2020 Tianshu AI Platform. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =============================================================
 */

<template>
  <div class="flex flex-vertical-align">
    <div class="mr-4 f14">切换场景：</div>
    <InfoSelect
      v-model="state.datasetListType"
      :clearable="false"
      width="150px"
      :dataSource="datasetListTypeOptions"
      @change="handleChange"
    />
  </div>
</template>

<script>
import { reactive } from '@vue/composition-api';
import InfoSelect from '@/components/InfoSelect';

import { pushUrl } from '../../util';

export default {
  name: 'TenantSelector',
  components: {
    InfoSelect,
  },
  props: {
    datasetListType: String,
  },
  setup(props, ctx) {
    const { $router } = ctx.root;
    const datasetListTypeOptions = [
      { value: 0, label: '视觉/语音/文本' },
      { value: 1, label: '医学影像' },
      { value: 2, label: '点云' },
    ];

    const state = reactive({
      datasetListType: Number(props.datasetListType),
    });

    const handleChange = (value) => {
      state.datasetListType = value;
      localStorage.setItem('datasetListType', state.datasetListType);
      $router.push({ path: pushUrl[value] });
    };

    return {
      handleChange,
      datasetListTypeOptions,
      state,
    };
  },
};
</script>
